<script>
import Icon from '../../Iconfont'
export default {
  name: 'Menu',
  components: {
    Icon: Icon
  },
  data() {
    return {
      itemArr: [
        {
          to: '/',
          iconType: 'home',
          text: '首页',
          isexact: false,
        },
        {
          to: '/blog',
          iconType: 'blog',
          text: '文章',
          isexact: true,
        },
        {
          to: '/about',
          iconType: 'about',
          text: '关于我',
          isexact: false,
        },
        {
          to: '/project',
          iconType: 'code',
          text: '项目&效果',
          isexact: false,
        },
        {
          to: '/message',
          iconType: 'chat',
          text: '留言板',
          isexact: false,
        },
      ]
    }

  }

}
</script>



<template>
  <div class="menu-aontainer">
    <RouterLink v-for="item in itemArr" :key="item.to" :to="item.to" :exact="!item.isexact" active-class="selected">
      <Icon :type="item.iconType" />
      <span>{{ item.text }}</span>
    </RouterLink>
  </div>
</template>



<style lang='less' scoped>
@import '~@/styles/var.less';

.menu-aontainer {
  color: @lightWords;
  display: flex;
  flex-direction: column;

  a {
    padding-left: 50px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;

    &.selected {
      color: @gray;
      font-weight: 700;
      background-color: #474747;
    }

    .iconfont {
      font-size: 20px;
      margin-right: 8px;
    }
  }
}
</style>